<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/sw.css" />
    <style>
        label {
            margin: 10px;
            font-size: 24px;
        }

        ul {
            margin-bottom: 10px;
        }

        ul li {
            margin: 5px 10px;
            padding: 5px;
            color: #000;
            word-wrap: break-word;
        }
        header {
            height: 44px;
            width: 100%;
            text-align: center;
            background-color: #81a9c3;
            color: #fff;
            line-height: 44px;
            font-size: 20px;
        }
        footer {
            height: 30px;
            width: 100%;
            background-color: #81a9c3;
            color: white;
            line-height: 30px;
            text-align: center;
        }
    </style>
    
    <style> 
        html{width:100%;height:100%;} 
        body{background:#fff;font-size:18px;font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";
        line-height:18px;padding:0px;margin:0px;text-align:center} 
        div{padding:18px} 
        img{border:0px;vertical-align:middle;padding:0;margin:0} 
        input, button{font-family:"Arial", "Tahoma", "微软雅黑", "雅黑";border:0;
        vertical-align:middle;margin:8px;line-height:18px;font-size:18px} 
        .btn{width:140px;height:36px;line-height:18px;font-size:18px;
        background:url("../icon/bg26.jpg") no-repeat left top;color:#FFF;padding-bottom:4px} 
    </style> 
    <style>
            input{
                border: 1px solid #ccc;
                padding: 7px 0px;
                border-radius: 3px;
                padding-left:5px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
            }
            input:focus{
                    border-color: #66afe9;
                    outline: 0;
                    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
                    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
            }
    </style>
</head>

<body>

    <header id="h_msg">Smart Home</header>

    <div>
        <img src="../icon/wendu.png" />
        <span id="wendu"></span>
    </div>
    <div>
        <img src="../icon/shidu.png" />
        <span id="shidu"></span>
    </div>
    <div>
        <label>led</label>
        <label class="switch_on" id="led_btn"> 
            <input type="checkbox" checked="checked">
            <span class="input"></span>
        </label>
    </div>
    <div>
        <label>key</label>
        <label class="switch_on" id="key_btn"> 
            <input type="checkbox" checked="checked">
            <span class="input"></span>
        </label>
    </div>
    <div id='sys-info'></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
        var led_st = 1;
        var sm_sid;

    apiready = function() {
        var socketManager = api.require('socketManager');
    
        var __pageParam = api.pageParam;
        socketManager.createSocket({
            host: __pageParam["_ip"],
            port: __pageParam["_port"]
        }, function(ret, err) {
            if (ret) {
                //alert(JSON.stringify(ret));
                sm_sid = ret["sid"];
                if(ret["state"] == 103){
                    var re_value = JSON.parse(ret["data"]);
                    
                    document.getElementById("wendu").innerHTML = re_value["tem"];
                    document.getElementById("shidu").innerHTML = re_value["hum"];
                    var key_value = re_value["key"];

                    if(key_value == "0") {
                        document.getElementById("key_btn").children[1].className = "input checked";
                    }else{
                        document.getElementById("key_btn").children[1].className = "input";
                    }
                } 
                if(ret["state"] == 102){
                    setInterval(function() {
                        socketManager.write({
                            sid:sm_sid,
                            data: {
                                "led":	"" + led_st
                            }
                        }, function(ret, err) {
                            if (ret.status) {
                            // alert(JSON.stringify(ret));
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });           
                    },1000);       
                }
            } else {
                alert(JSON.stringify(err));
            }
        });

        document.getElementById("led_btn").onclick = function () {
            if (this.children[0].checked == true) {
                this.children[1].className = "input checked";
                led_st = 1;
            } else {
                this.children[1].className = "input";
                led_st = 0;
            }
        }
    };

</script>

</html>
